<template>
  <template v-if="loadingIsShow"></template>
  <template v-else>
    <!-- 排行榜 (排行榜概述)-->
    <div class="ranking-detail">
      <sort-title-vue
        :title="rankingDetailTitle"
        :isShowTitle="isShowTitle"
      ></sort-title-vue>
      <!-- 概述内容区 -->
      <div class="ranking-detail-container">
        <cover-detail-vue
          :rankingDetailData="rankingDetailData"
          :coverDetail="coverDetail"
        ></cover-detail-vue>
      </div>
    </div>
    <!-- 内容区歌单 -->
    <div class="ranking-container">
      <sort-title-vue
        :title="rankingTitle"
        :isShowTitle="isShowTitle"
      ></sort-title-vue>
      <song-list-cover-vue
        :songListCoverData="rankingContainerData"
      ></song-list-cover-vue>
    </div>
  </template>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import axios from "axios";
import coverDetailVue from "../../../../components/coverDetail/coverDetail.vue";
import songListCoverVue from "../../../../components/songListCover/songListCover.vue";
import sortTitleVue from "../../../../components/sortTitle/sortTitle.vue";

const store = useStore();

// loading
const loadingIsShow = ref(true);

// 概述区标题
const rankingDetailTitle = ref("官方榜");

// 排行榜概述
const rankingDetailData = ref("");
rankingDetailData.value = { result: { songs: [] }, data: {} };
const songsDetaileId = ref([]);

// 获取歌单前五条歌曲
const getSongListhData = async (id) => {
  // 只请求五条
  await axios
    .get(`/playlist/track/all?id=${id}&limit=5&offset=0`)
    .then((res) => {
      res.data.songs.forEach((ele) => {
        rankingDetailData.value.result.songs.push(ele);
      });
      loadingIsShow.value = false;
    })
    .catch((err) => {
      console.error(err);
    });
};

const getRankingDetailData = async () => {
  await axios
    .get(`/toplist/detail`)
    .then((res) => {
      rankingDetailData.value.data = res.data.list;

      res.data.list.forEach((ele, index) => {
        if (index >= 4) return;
        songsDetaileId.value.push(ele.id);
      });

      // 追加四组歌曲列表数据
      songsDetaileId.value.forEach((ele) => {
        getSongListhData(ele);
      });
    })
    .catch((err) => {
      console.error(err);
    });
};
getRankingDetailData();

// 传递变量
const coverDetail = reactive({
  isShowTimes: true,
});

// 内容区标题
const rankingTitle = ref("全球榜");
const isShowTitle = ref(false);

// 获取内容区歌单封面数据
const rankingContainerData = ref("");
const getRankingContainerData = async () => {
  await axios
    .get(`/toplist`)
    .then((res) => {
      rankingContainerData.value = res.data.list;
    })
    .catch((err) => {
      loadingIsShow.value = false;
      console.error(err);
    });
};
getRankingContainerData();
</script>
<style lang="less">
</style>